<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>门店投币</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/timecheck.css" />
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<script>
      var width =window.localStorage.getItem('width');
      document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
		</script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				/*height: 100%;*/
			}
			
			.total-info {
				margin-top: 0.04rem;
				background-color: #FFFFFF;
				text-align: center;
				font-size: 0.22rem;
				line-height: 0.45rem;
			}
			/**/
			/**/
			
			table {
				font-size: 0.22rem;
				width: 100%;
				text-align: center;
				margin-top: 0.1rem;
			}
			table tr td{
				padding: 0.1rem 0;
				height: 0.8rem;
				font-size: 0.2rem;
			}
			table,
			table,
			tbody,td div{
				text-align: center;
			}
			td span{
				display: inline-block;
				text-align: left;
				vertical-align: middle;
			}
			.bglight {
				background-color: #FFFFFF;
			}
			.tab-head {
				background-color: #FFFFFF;
				line-height: 0.5rem;
			}
			
			.light {
				color: #8e8a8a;
			}
			.formDiv{
				width: 100%;
				background-color: white;
				padding: 0.2rem 0.1rem 0.1rem;
				margin: 0.2rem 0 0 ;
				color:black;
				display: flex;
				justify-content:space-between;
			}
			.form{
				width: 49%;
				background-color: #F7F7F7;
				border-radius: 0.2rem;
				text-align: center;
				padding: 0.3rem 0 ;
			}
			.float{
				width: 48%;
				float: left;
			}
			.form .float p{
				margin: 0 0 0.05rem;
				color:black;
				font-size: 0.22rem;
			}
			.borderRight1{
				border-right:1px solid #CCCCCC ;
			}
			.formTitle{
				font-size: 0.26rem;
				margin: 0 0 0.1rem;
			}
			.totalForm{
				width: 100%;
				text-align: center;
				font-size: 0.22rem;
			}
			.totalForm>p{
				width: 100%;
				color:black;
			}
			.totalForm>p:first-child{
				font-size: 0.26rem;
			}
			.totalForm p{
				margin: 0;
			}
			.totalForm .formFlex{
				display: flex;
				margin-top: 0.1rem;
			}
			.formFlex .flexItem{
				width: 33%;
			}
			.colorBlack{
				color:black
			}
			.mui-icon-arrowthindown::before{
				height: 0.2rem;
			}
			.scanForm{
				width: 100%;
				display: flex;
				justify-content:space-around
			}
			.scanDiv{
				width: 100%;
				text-align: center;
				background-color: #F7F7F7;
				border-radius: 0.2rem;
				padding-top: 0.2rem;
			}
			.fixed{
				width: 100%;
				font-size: 0.2rem;
				background-color: white;
				border-top:1px solid #ccc ;
				border-bottom:1px solid #ccc ;
				position: fixed;
				top:1.15rem;
				z-index: 9999999;
			}
			.fixed span{
				display: inline-block;
				text-align: center;
				height: 0.6rem;
				line-height: 0.6rem;
			}
			.display{
				display: none;
			}

			.choose{
				width: 1rem;
				margin: 0;
				text-align: center;
				padding: 0.02rem ;
				font-size: 0.18rem;
				background-color: white;
				border: 1px solid #ED7D31;
			}
			.chooseList{
				text-align: center;
				background-color: white;
				border-left: 1px solid #ED7D31;
				border-right: 1px solid #ED7D31;

			}
			.chooseList p{
				width:100%;
				margin: 0;
				padding: 0.02rem;
				border-bottom: 1px solid #ED7D31;
				font-size: 0.18rem;
				color:black;
			}
			.chooseList  .default{
				color:white;
				background-color: #ED7D31 ;
			}
			.jiantou{
				position: absolute;
				top:0.1rem;
				right: 0.3rem;
				width: 0.3rem;
			}
			.jiantou  img{
				width: 0.3rem;
			}
			.FontSizeSmall{
				font-size: 0.22rem;
			}
			.fontSizeBig{
				font-size: 0.26rem;
				color:black
			}
			.storeChoose{
				width:100%;
				font-size: 0.22rem;
				text-align: center;
				overflow: hidden;
				padding: 0.2rem 3%;
				background-color: white;
				margin-top: 0.1rem;
			}
			.storeChoose span{
				display: inline-block;
				width: 33%;
				padding: 0.06rem 0;
				float: left;
				border: 1px solid #ccc;
				font-size: 0.2rem;
				background-color:white;
			}
			.storeChoose span:nth-child(2){
				border-right: none;
				border-left: none;
			}
			.storeChoose .default{
				background-color: #ccc;
			}
			#lineChart{
				width: 100%;
				height: 4.2rem;
				background-color: white;
			}

			.dotDiv {
				width: 0.6rem;
				position: absolute;
				top: -0.1rem;
				right: 0;
			}

			.dotDiv .dot {
				width: 4px;
				height: 4px;
				border-radius: 2px;
				background-color: #ccc;
				margin: 0.05rem auto 0;
				/*float: right;*/
				/*margin-right: 0.05rem ;*/
			}

		</style>
	</head>

	<body>
		<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<div id="app" class="mui-content" >
			<time-check :type="2" :names='names' :dateType="dateType" :leftdata="totalData.atmCoinSell" :rightdata="totalData.atmCoinInput" leftunit="枚" rightunit="枚"  :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
			<div class="total-info flex">
				<div class="flex-item  textLeft">售币币值： {{totalData.avgCoin}}元/币 </div>
				<!--<div class="flex-item">使用率：{{totalData.recoverCoin!==0&&totalData.sellCoin!==0?(totalData.sellCoin/totalData.recoverCoin).toFixed(0)+'%':'&#45;&#45;'}}</div>-->
				<div class="flex-item textRight ">币差率：{{totalData.atmCoinLoseRate}}</div>
			</div>
			<!--表单数据 start-->
			<div class="formDiv">
					<div class="form ">
							<div style="position: relative">
								<h4 class="formTitle fontSizeBig" style="width: 90%">ATM</h4>
								<img v-show="totalData.atmState === 1" src="../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.1em;right:1.1rem"/>
								<img v-show="totalData.atmState === 0" src="../images/troubleflag-gray.png"  alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.1em;right:1.1rem"/>
								<div class="dotDiv" @click="toAtmDetail('coinATMList')">
									<p class="dot"></p>
									<p class="dot"></p>
									<p class="dot"></p>
								</div>
							</div>
							<p style="color:black" class="FontSizeSmall">购币实收：{{totalData.atmMoney}}</p>
							<div class="float borderRight1" style="width: 48%">
								<p class="colorBlack FontSizeSmall" style="color:#8e8a8a;" >售币待出</p>
								<p class="FontSizeSmall">{{totalData.atmSellCoin}}</p>
							</div>
							<div class="float" style="width: 48%">
								<p  style="color:#8e8a8a;"  class="FontSizeSmall">提币待出</p>
								<p  class="FontSizeSmall">{{totalData.atmExCoin}}</p>
							</div>
					</div>
					<div class="form ">
						<h4 class="formTitle fontSizeBig">会员卡</h4>
						<p  style="color:black"  class="FontSizeSmall">购币实收：{{totalData.cardMoney}}</p>
						<div class="float borderRight1" style="width: 30%;margin-left: 0.2rem">
							<p style="color:#8e8a8a"  class="FontSizeSmall">吧台售币</p>
							<p  class="FontSizeSmall">{{totalData.cardCoinSell}}</p>
						</div>
						<div class="float borderRight1" style="width: 30%">
							<p style="color:#8e8a8a;"  class="FontSizeSmall">投币</p>
							<p  class="FontSizeSmall">{{totalData.cardCoinInput}} </p>
						</div>
						<div class="float" style="width: 30%">
							<p style="color:#8e8a8a;"  class="FontSizeSmall">提币</p>
							<p  class="FontSizeSmall">{{totalData.cardCoinOutput}} </p>
						</div>
					</div>
			</div>
			<div class="formDiv " style="margin: 0 ;padding:  0 0.1rem 0.2rem">
				<div class="form">
					<div class="scanDiv">
						<p class="fontSizeBig"><strong>扫码投币</strong></p>
						<div class="scanForm">
							<div style="width: 48%;color: black " class="borderRight1">
								<p  class="FontSizeSmall" style="margin: 0;">耗钻</p>
								<p  class="FontSizeSmall" style="margin: 0;color: black">{{totalData.qrcodeDiamond }}</p>
							</div>
							<div style="width: 48%;color: black">
								<p style="margin: 0;"  class="FontSizeSmall">投币</p>
								<p  class="FontSizeSmall" style="margin: 0;color: black">{{totalData.qrcodeCoin }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="form">
					<div class="scanDiv">
						<p style="" class="fontSizeBig"><strong>钻石提币</strong></p>
						<div class="scanForm">
							<div style="width: 48%;color: black " class="borderRight1">
								<p  class="FontSizeSmall" style="margin: 0">耗钻</p>
								<p  class="FontSizeSmall" style="margin: 0;color: black">{{totalData.buyCoinDiamond }}</p>
							</div>
							<div style="width: 48%;color: black">
								<p   class="FontSizeSmall" style="margin: 0">提币</p>
								<p   class="FontSizeSmall" style="margin: 0;color: black">{{totalData.diamondBuyCoin }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="formDiv" >
				<div class="form" style="width: 100%;position: relative">
					<div class="totalForm">
						<p v-show="!isAve" class="fontSizeBig"><strong>总收币量</strong> </p>
						<p v-show="isAve"  class="fontSizeBig"><strong>单台收币量</strong></p>
						<p v-show="!isAve" style="font-size: 0.22rem"><strong >{{totalData.totalInput}} <span v-show="totalData.totalInput !=='--' ? true:false" >枚</span> </strong></p>
						<p v-show="isAve" style="font-size: 0.22rem"><strong>{{totalData.averageInput}} <span v-show="totalData.averageInput !=='--' ? true:false">枚</span></strong></p>
						<div class="formFlex">
							<div class="flexItem borderRight1">
								<p class='colorBlack'>{{totalData.rewardDevice.typeName ? totalData.rewardDevice.typeName :'--'}}</p>
								<p v-show="!isAve" class='colorBlack FontSizeSmall'>{{totalData.rewardDevice.typeCoin !== '--' ? totalData.rewardDevice.typeCoin+'枚' :'--'}} </p>
								<p  v-show="isAve"  class='colorBlack FontSizeSmall'>{{totalData.rewardDevice.aveTypeCoin !== '--' ? totalData.rewardDevice.aveTypeCoin+'枚' :'--'}} </p>
								<p v-show="!isAve" class="FontSizeSmall">{{totalData.rewardDevice.typeRate}}</p>
							</div>
							<div class="flexItem borderRight1">
								<p class='colorBlack'>{{totalData.ticketDevice.typeName ? totalData.ticketDevice.typeName : '--'}}</p>
								<p v-show="!isAve"  class='colorBlack FontSizeSmall' >{{totalData.ticketDevice.typeCoin !== '--' ? totalData.ticketDevice.typeCoin+'枚' : '--'}}</p>
								<p  v-show="isAve"  class='colorBlack FontSizeSmall'>{{totalData.ticketDevice.aveTypeCoin !== '--' ? totalData.ticketDevice.aveTypeCoin+'枚' : '--'}}</p>
								<p v-show="!isAve"  class="FontSizeSmall">{{totalData.ticketDevice.typeRate}}</p>
							</div>
							<div class="flexItem">
								<p class='colorBlack'>{{totalData.gameDevice.typeName ? totalData.gameDevice.typeName : '--'}}</p>
								<p v-show="!isAve"  class='colorBlack FontSizeSmall'>{{totalData.gameDevice.typeCoin !=='--' ? totalData.gameDevice.typeCoin+'枚' :'--'}}</p>
								<p v-show="isAve"  class='colorBlack FontSizeSmall'>{{totalData.gameDevice.aveTypeCoin !=='--' ? totalData.gameDevice.aveTypeCoin+'枚' :'--'}}</p>
								<p v-show="!isAve" class="FontSizeSmall">{{totalData.gameDevice.typeRate}}</p>
							</div>
						</div>

					</div>
					<div class="jiantou" @click="showAve">
						<img src="../images/jiantou.png" alt="">
					</div>
				</div>


			</div>
			<!--表单数据 end-->
			<!--饼图 start-->
			<div class="mui-row" style="background-color: white;margin-top: 0.1rem">
				<div class="mui-col-xs-6 mui-col-sm-6">
					<div id="leftPie" style="width: 100%;height:3.5rem;"></div>
				</div>
				<div class="mui-col-xs-6 mui-col-sm-6">
					<div id="rightPie" style="width: 100%;height:3.5rem;"></div>
				</div>
			</div>
			<!--饼图 end-->
			<!--选择框-->
			<div class="storeChoose">
				<span @click="chooseMap(1)" :class="{default:chooseType ===1}" >{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}总收币量</span>
				<span @click="chooseMap(2)" :class="{default:chooseType ===2}" >{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}币值波动</span>
				<span @click="chooseMap(3)" :class="{default:chooseType ===3}" >币差率波动</span>
			</div>
			<!--折线图-->
			<div id="lineChart" ></div>
			<!--门店列表 start-->
			<div class="division flex" style="position: relative">
				<div class="line"><span></span></div>
				<div class="division-word">
					设备收币报告
				</div>
				<div class="line" style="text-align: left;width:0.3rem;"><span style="width:0.7rem;"></span></div>
				<div style="position: absolute;top:0;right:0.1rem">
					<div @click="openModal" class="choose">{{chooseValue}}</div>
					<div class="chooseList" v-show="modalShow">
						<p v-for="item in sortList "  @click="choose(item.id)" :class=" sortType === item.id ? 'default' : '' "  >{{item.value}}</p>
					</div>
				</div>
			</div>
			<!---->
			<div :class=" isFixed === true ? 'fixed' : 'display'">
				<span style="width:33%">设备</span>
				<span style="width:15.5%" class="light" >数量</span>
				<span style="width:16.5%" class="light" >总收币</span>
				<span style="width:32%">单台收币</span>
			</div>
			<table>
				<tr class="tab-head">
					<td style="width:30%">设备</td>
					<td style="width:15%" class="light" >数量</td>
					<td style="width:15%" class="light" >总收币</td>
					<td style="width:30%">单台收币</td>
				</tr>
				<tr v-show="totalData.devices.length !==0" v-for="(item,index) in deviceList" :key='index' :class="{bglight:index%2===1}" @click="toPage(index)">
					<td style="width:30%"><div>
						<img v-show="item.deviceType ===1" style="width: 0.2rem; position:relative;top:0.1rem; float: left;margin-left: 0.2rem" src="../images/liping.png" alt="">
						<img v-show="item.deviceType ===2" style="width: 0.25rem;position:relative;top:0.06rem;float: left;margin-left: 0.2rem" src="../images/game1.png" alt="">
						<img v-show="item.deviceType ===3" style="width: 0.28rem;position:relative;top:0.06rem;float: left;margin-left: 0.2rem" src="../images/caipiao.png" alt="">
						<span style="vertical-align:middle">{{item.deviceName}}</span></div></td>
					<td style="width:15%" >
            <div style="overflow: hidden;position: relative;width: 100%;">
              <span class="light" >{{ item.deviceCount !=='--' ? item.deviceCount+'台' : item.deviceCount}}</span>
              <img v-show="item.deviceState ===1&&dateType===0" src="../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===2&&dateType===0" src="../images/troubleflag-red.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===3&&dateType===0" src="../images/troubleflag-gray.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
              <img v-show="item.deviceState ===4&&dateType===0" src="../images/troubleflag-gray2.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
            </div>
          </td>
					<td style="width:15%" ><div><span class="light">{{item.totalCoin}}</span></div></td>
					<td style="width:30%;">
						<div>
							<span style="display: inline-block;width: 50%;text-align: center;float: left;margin-left: 30px;vertical-align: middle">{{item.aveCoin}}</span>
							<img v-show="item.aveStoreCompare ===1" src="../images/up.png" alt="" style="width: 0.28rem;vertical-align: middle">
							<img v-show="item.aveStoreCompare ===2" src="../images/dowm.png" alt="" style="width: 0.28rem;vertical-align: middle">
							<span v-show="item.aveStoreCompare ===0"> --</span>
						</div>
					</td>
				</tr>
			</table>
			<p v-show="totalData.devices.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
				暂无数据
			</p>
			<!--门店列表 end-->
			<!--<div style="width: 100%;background-color: white;height: 0.1rem;margin-top: 0.5rem" ></div>-->
			<p style="width: 100%;margin:0.5rem 0 0.59rem ; padding-left: 0.1rem; text-align: left;color:white;background-color:#ED7D31;">数据来源：门店抄表({{totalData.dateText}})</p>
			<div class="bar">
				<p class="borderRight " @click="toPage2('incomeItem')">收入</p>
				<p class="borderRight default">收币</p>
				<p class="borderRight" @click="toPage2('rewordShopReport')">返奖</p>
				<p class="borderRight" @click="toPage2('lotteryStore')">出票</p>
				<p @click="toPage2('rankingList')">榜单</p>
				<p @click="toPage2('activity')">活动</p>
			</div>

		</div>
		<script type="text/javascript">
      mui.init();
      var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						names: {
							leftName: 'ATM实出币',
							rightName: '回收代币'
						},
						actnum:0,
						storeId: '',
						storeName: '',
						currentShopObj: {},
						fromDate:'',
						toDate:'',
						totalData: {
              rewardDevice:{
                "typeName":"礼品机",
                "typeCoin":0,
                "typeRate":0
              },
              ticketDevice:{
                "typeName":"彩票机",
                "typeCoin":0,
                "typeRate":0
              },
              gameDevice:{
                "typeName":"娱乐机",
                "typeCoin":0,
                "typeRate":0
              },
              devices:[
                {
                  "deviceType":2,
                  "deviceModel":"",
                  "deviceName":"WPDMX",
                  "totalCoin":0,
                  "aveCoin":0,
                  "aveStoreCompare":2
                },
							]
						},
            pieOptions1: {
              title : {
                subtext: '投币方式',
                x:'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)",
                triggeron: 'click',
                position: [10, 10],
                textStyle: {
                  fontSize: 12
                }
              },
              legend: {
                bottom: 10,
                left: 'center',
                data: ['卡头', '代币'],
                itemGap: 5,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                  fontSize: 10
                }
              },
              color: ['#4472C4', '#ED7D31'],
              series: [{
                type: 'pie',
                selectedOffset: 5,
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                  {
                    value: 0,
                    name: '卡头',
                  },
                  {
                    value: 0,
                    name: '代币'
                  },
                ],
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            },
            pieOptions2: {
              title : {
                subtext: '收币设备',
                x:'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)",
                triggeron: 'click',
                position: [10, 10],
                textStyle: {
                  fontSize: 12
                }
              },
              legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center',
                data: ['礼品机', '彩票机','娱乐机'],
                itemGap: 5,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                  fontSize: 10
                }
              },
              color: ['#ED7D31','#FFC000','#a3d609'],
              series: [{
                type: 'pie',
                selectedOffset: 5,
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [{
                  value: 0,
                  name: '礼品机',
                	},
                  {
                    value: 0,
                    name: '彩票机'
                  },
                  {
                    value: 0,
                    name: '娱乐机',
                  },
                ],
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            },
            pieOptions3:{
							title: {
                subtext:'30天总收币趋势图',
								left: 'center',
								textStyle: {
								fontSize: 20,
									fontWeight: 500
								}
							},
							tooltip: {
								trigger: 'axis',    //item 饼图触发  axis线性图触发
								textStyle: {
									fontSize: 12
								},
                formatter: function (params) {
                  var html='<p style="color:white;font-size: 12px;margin: 0;padding: 0 ">'+params[0].name+'</p>'
                  for(var i=0;i<params.length;i++){
                    html +='<p style="color:white;font-size: 12px;margin: 0;padding: 0 ">' +
                      '<span style="display: inline-block;width: 10px;height:10px;border-radius:5px;margin:0 0.05rem;background-color:'+params[i].color+'"></span>' +
                      '<span >'+params[i].seriesName+'：'+params[i].data+(params[i].seriesName ==='总收币' ? '枚' :  params[i].seriesName ==='币差率' ? '%' : '') +'</span></p>'
                  }
                  return html
                }
							},
							legend: {
								data: ['总收币'],
									show: true,
									bottom:10
							},
							feature: {
								dataView: {
									show: true,
										readOnly: false
								}
							},
							calculable: true,
							grid: {
									left: '0%',
									right: '6%',
									bottom: '14%',
									top: '20%',
									containLabel: true,
									borderColor: '#e2e2e2'
							 },
							xAxis: [
									{
										type: 'category',
										splitLine: {
										show: false
									},
									data: [],
									axisLabel: {
                    interval:1                                                                                                                        ,
//                    rotate:30,
										textStyle: {
											color: '#868686',
											fontSize: '8px'
										}
									}
								}
							],
							yAxis: [
								{
									name:'',
									type: 'value',
									nameLocation: 'end',
									max: 100,
                  splitLine: {
                    show:true,
                    lineStyle: {
                      // 使用深浅的间隔色  
                      color: ['#b1b1b1'],
                      type:'dotted'
                    }
                  },
									axisLabel: {
										textStyle: {
											color: '#868686',
											fontSize: '8px'
										},
                    formatter:'{value}'
									}
								},
						],
							series: [
								{
									name: '总收币',
									type: 'line',
									data:[0,30,80],
									yAxisIndex: 0,
									itemStyle: {
										normal: {
											color: '#4472C4',        // 控制例子线条的style
											lineStyle: {
												color: '#4472C4'      //  lineStyle 控制对应线条style
											}
										}
									},
								},
							]
          },
            dateType:1,
						isFixed:false,
            modalShow:false,
            sortList:[
							{id:0,value:'按名称'},
							{id:1,value:'按类别'},
							{id:2,value:'按数量'},
							{id:3,value:'按总收币'},
							{id:4,value:'按单台收币'},
						],
            sortType:0,
            chooseValue:'按名称',
						int:0,    //0 点击第一次 张开  1 关闭
						deviceList:[],
            isAve:false,
						lastPage:'',
            top:'1rem',
            chooseType:1,  //30天总收币量  2 币值波动  3 币差率波动
						mapData:[],   //第三张图的list

					}
				},
				created:function() {
					mui.plusReady(function(){
						vm.receiveParams()
					});
				},
        mounted: function() {
          window.addEventListener('scroll', this.handleScroll);
        },
				methods: {
          loadData:function() {
            var vm = this;
            var data={
              fromDate:Number(new Date(vm.fromDate).format('yyyyMMdd')) ,
              toDate:Number(new Date(vm.toDate).format('yyyyMMdd')),
              storeId:vm.storeId,
              type:vm.dateType,
						}
						console.log(JSON.stringify(data))
            config.ajax({
              url:'/coinstat/store',
              data:{
                fromDate:Number(new Date(vm.fromDate).format('yyyyMMdd')) ,
                toDate:Number(new Date(vm.toDate).format('yyyyMMdd')),
                storeId:vm.storeId,
                type:vm.dateType,
              },
              success: function(res){
							  console.log(JSON.stringify(res))
                if(res.result === 1) {
                  vm.totalData = res;
                  vm.loadData2()
                  vm.deviceList=JSON.parse(JSON.stringify(vm.totalData.devices));
                  if(vm.deviceList.length !==0){
                    vm.sortFun();
									}

                  vm.pieOptions1.series[0].data=[
                    {name: '卡头',value: vm.totalData.cardCoinInput === '--' ? 0 : vm.totalData.cardCoinInput},
                    {name: '代币',value: vm.totalData.atmCoinInput === '--' ? 0 : vm.totalData.atmCoinInput}
                  ];
                  vm.pieOptions2.series[0].data= [
                    { name: '礼品机',value: vm.totalData.rewardDevice.typeCoin !=='--' ? vm.totalData.rewardDevice.typeCoin : 0},
                    { name: '彩票机',value: vm.totalData.ticketDevice.typeCoin !=='--' ? vm.totalData.ticketDevice.typeCoin : 0},
                    { name: '娱乐机',value: vm.totalData.gameDevice.typeCoin  !=='--' ? vm.totalData.gameDevice.typeCoin :0}
                  ];
                  vm.mapData=res.days;
                  vm.changeMap()
                } else {
                  mui.toast(res.errormsg)
                }
              },
              error:function(res){
                mui.toast(res.errormsg)
              }
            })
          },
					receiveParams: function() {
						var sf = plus.webview.currentWebview();
						this.currentShopObj = sf.currentShopObj;
						this.storeId = sf.storeId
						this.storeName = sf.storeName
						this.toDate = sf.toDate
						this.fromDate = sf.fromDate
						this.actnum  = sf.actnum
						this.dateType  = sf.dateType
						this.lastPage  = sf.lastPage ? sf.lastPage : false
            if(this.lastPage){
              this.closePage()
            }
					},
          initCharts: function() {
            var vm = this;
            var leftPie = echarts.init(document.getElementById('leftPie'));
            leftPie.setOption(vm.pieOptions1);
            var rightPie = echarts.init(document.getElementById('rightPie'));
            rightPie.setOption(vm.pieOptions2)
						var lineChart = echarts.init(document.getElementById('lineChart'));
            lineChart.setOption(vm.pieOptions3)
          },
          toPage:function(index){
					  var  vm=this;
            mui.openWindow({
              url: 'coinDeviceList.html',
              id: 'coinDeviceList',
              styles: {
                titleNView: {
                  titleText: vm.fromDate+'至'+vm.toDate,
                  titleColor: "#FFFFFF",
                  titleSize: "14px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  buttons: [{
                    fontWeight: 'normal',
                    fontSize: '18px',
                    float: 'right',
                    fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                    text: "\ue602",
                    onclick: function() {
                      var allPage = plus.webview.all()
                      var nowPage = plus.webview.getWebviewById('index');
                      for(var i = 0; i < allPage.length; i++) {
                        if(allPage[i].getURL() !== nowPage.getURL()) {
                          plus.webview.close(allPage[i]);
                        }
                      }
                    }
                  }],
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                currentShopObj: vm.currentShopObj,
                storeId: vm.storeId,
                deviceType: vm.deviceList[index].deviceType,
                deviceModel: vm.deviceList[index].deviceModel,
								storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate: vm.toDate,
                dateType:vm.dateType    //0 日 1 周 2 月
              }
            });

					},
          handleScroll:function(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 1131 ){
              vm.isFixed=true;
              vm.top='1.75rem'
            }else {
              vm.isFixed=false;
              vm.top='1.18rem'
            };
          },
          openModal:function(){
            if(vm.int === 0){
              this.modalShow=true;
              vm.int =1
						}else if(vm.int ===1){
              this.modalShow=false;
              vm.int =0
						}
					},
//选择排序type
          choose:function(id){
            vm.sortType =id;
            vm.chooseValue = vm.sortList[id].value;
            vm.modalShow=false;
            vm.int=0;
						vm.sortFun();
					},
          toPage2:function(url){
            var vm = this;
            var storeName=vm.storeName;
            mui.openWindow({
              url: './'+url+'.html',
              id: url,
              styles: {
                titleNView: {
                  titleText:  storeName ,
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  buttons: [{
                    fontWeight: 'normal',
                    fontSize: '18px',
                    float: 'right',
                    fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                    text: "\ue602",
                    onclick: function() {
                      var allPage = plus.webview.all()
                      var nowPage = plus.webview.getWebviewById('index')
                      for(var i = 0; i < allPage.length; i++) {
                        if(allPage[i].getURL() !== nowPage.getURL()) {
                          plus.webview.close(allPage[i]);
                        }
                      }
                    }
                  }],
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                storeId: vm.storeId,
                storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate:vm.toDate,
                dateType:vm.dateType,
                actnum: vm.actnum,
                lastPage:'coinShopOperated',
              },
              createNew:true,
            });
          },
          showAve:function(){
            if(vm.isAve){
              vm.isAve=false
						}else{
              vm.isAve=true
						}
					},
					closePage:function(){
            var vm=this;
            var allPage = plus.webview.all()
            var nowPage = plus.webview.getWebviewById(vm.lastPage);
            for(var i = 0; i < allPage.length; i++) {
              if(allPage[i].getURL() === nowPage.getURL()) {
                plus.webview.hide(allPage[i]);
                plus.webview.close(allPage[i]);
              }
            }
					},
//					排序fun
					sortFun:function(){
            if(vm.sortType === 0){
              vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
                return (item1.deviceModel).localeCompare(item2.deviceModel);
              });
            }else if(vm.sortType === 1){
              vm.deviceList.forEach(function(item,index){
                item.sort=String.fromCharCode(64 + parseInt(item.deviceType))+item.deviceModel
              });
              vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
                return (item1.sort).localeCompare(item2.sort);
              });
            }else if(vm.sortType === 2){
              vm.deviceList.sort(function(a,b){
                return b.deviceCount - a.deviceCount
              })
            }else if(vm.sortType === 3){
              vm.deviceList.sort(function(a,b){
                return b.totalCoin - a.totalCoin
              })
            }else if(vm.sortType === 4){
              vm.deviceList.sort(function(a,b){
                return b.aveCoin - a.aveCoin
              })
            }
					},
//选择 1总收币量 2 币值波动 3 币差率波动
          chooseMap:function(params){
            var vm=this;
            if(params !== vm.chooseType){
              vm.chooseType =params;
              vm.changeMap()
            }
          },
//修改图的data
					changeMap:function(){
            var  vm=this;
            vm.pieOptions3.series[0].data=[],vm.pieOptions3.xAxis[0].data=[];
            var params='',max=0, date='';
            vm.mapData.forEach(function(item,index){
//           判断 获取哪个字段的值  totalInput：总收币量  avgcoin：币值  diffCoin：币差率
              if(vm.chooseType ===1){
                params=item.totalInput;
                vm.pieOptions3.series[0].type='bar';
							}else if(vm.chooseType ===2){
                params=item.avgcoin;
                vm.pieOptions3.series[0].type='line';
							}else{
                params=item.diffCoin;
                vm.pieOptions3.series[0].type='line';
							};
							if(params === '--'){
							  params=0
							}
              params=(params+'').replace('%','')
							params=Number(params);

//							修改时间样式
              if(vm.dateType ===0){
              	date=JSON.parse(JSON.stringify((item.date+'').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3")))
              }else if(vm.dateType ===1){
								date= JSON.parse(JSON.stringify(item.date+'周'))
              }else if(vm.dateType ===2){
                date=JSON.parse(JSON.stringify(item.date+'月'))
              }
// 给图 赋值
              vm.pieOptions3.yAxis[0].axisLabel.formatter= vm.chooseType === 3 ? '{value}%' : '{value}';
              vm.pieOptions3.series[0].data.push(params);
							vm.pieOptions3.xAxis[0].data.push(date);
//							判断最大值
							if(Number(params)>max){
							  max=Number(params)
							}
						});
            var name= '近'+ (vm.dateType===0 ? '30日' : vm.dateType===1 ? '12周' :'12个月') + (vm.chooseType ===1 ?  '总收币量' :  vm.chooseType ===2 ? '币值波动' : '币差率波动');
						vm.pieOptions3.title.subtext=name;
            vm.pieOptions3.yAxis[0].max = Number(max) > 2 ? max : 2;
            vm.pieOptions3.series[0].name = vm.chooseType ===1 ? '总收币' : vm.chooseType ===2 ? '币值' : '币差率';
            vm.pieOptions3.legend.data[0] = vm.chooseType ===1 ? '总收币' : vm.chooseType ===2 ? '币值' : '币差率' ;
            vm.initCharts();
					},
//跳转ATM详情页面
          toAtmDetail:function(url){
            var  vm=this;
            mui.openWindow({
              url: url+'.html',
              id: url,
              styles: {
                titleNView: {
                  titleText: vm.storeName,
                  titleColor: "#FFFFFF",
                  titleSize: "14px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                currentShopObj: vm.currentShopObj,
                storeId: vm.storeId,
                storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate: vm.toDate,
                dateType:vm.dateType,    //0 日 1 周 2 月
                actnum:vm.actnum    //0 日 1 周 2 月
              }
            });
          },
// load
					loadData2:function() {
            var vm = this;
            config.ajax({
              url:'/coinstat/storeTwo',
              data:{
                fromDate:Number(new Date(vm.fromDate).format('yyyyMMdd')) ,
                toDate:Number(new Date(vm.toDate).format('yyyyMMdd')),
                storeId:vm.storeId,
                type:vm.dateType,
              },
              success: function(res){
                console.log(4545)
                if(res.result === 1) {
                  console.log(JSON.stringify(res))
                  vm.mapData=res.days;
                  vm.changeMap()
                } else {
                  mui.toast(res.errormsg)
                }
              },
              error:function(res){
                console.log(JSON.stringify(res))
                mui.toast(res.errormsg)
              }
            })
          },

				},
				watch: {
					fromDate: function() {
						this.loadData()
					}
				}
			})
		</script>
	</body>

</html>